<template>
  <div class="announceList-c">
    <div class="app-container">

      <el-card class="box-card">
        <div
          slot="header"
          class="clearfix"
        >
          <el-page-header
            @back="goBack"
            content="通知公告信息"
          >
          </el-page-header>
        </div>
        <div class="announce">
          <h1>{{announceObj.title}}</h1>
          <div class="ctime">
            <p>{{new Date(announceObj.ctime).toLocaleString()}}</p>
          </div>
          <div v-html="announceObj.content"></div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { getAnnounceInfoAPI } from '@/api'
import { goBack } from '@/utils'

export default {
  name: 'AnnounceInfo',
  data () {
    return {
      announceObj: {
        title: '',
        content: '',
        ctime: ''
      }
    }
  },
  created () {
    this.getAnnounceInfoFn()
  },
  methods: {
    goBack,
    // 转码
    escapeStringHTML (str) {
      str = str.replace(/&lt;/g, '<')
      str = str.replace(/&gt;/g, '>')
      return str
    },
    // 获取通知公告信息 -> 发送请求
    async getAnnounceInfoFn () {
      try {
        const { success, code, data } = await getAnnounceInfoAPI(
          this.$route.params.id
        )
        if (success && code === 10000) {
          this.announceObj = data
        }
      } catch (err) {
        return console.dir(err)
      }
      this.$forceUpdate()
    }
  },
  mounted () {
    this.announceObj.content = this.escapeStringHTML(this.announceObj.content)
  }
}
</script>

<style lang="less">
.announce {
  padding: 20px 40px;
  background-color: #fff;

  h1 {
    text-align: center;
  }

  .ctime {
    text-align: center;
    margin-top: 20px;
    font-size: 15px;
  }
}
</style>
